<template>
  <div>
      <ul class="content-total">
          <li v-for="(item) in types" :key="item">
              <div class="count-item" :class="item">
                  <p class="lab">{{tipNames[item]}}</p>
                  <p class="n">{{total[item].value}}</p>
                  <span class="compare">较昨日+{{total[item].add}}</span>
              </div>
          </li>
      </ul>
      <a @click="showMore" href="javascript:void(0)"
      style="font-size:14px; color:#666; line-height:3em">&lt;展示更多统计数&gt;</a>
  </div>
</template>


<script>
import tipNames from '../componets/tipNames';
export default {
    props:{
        name:{ 
            type : String 
        },
        total:{ 
            type : Object,
            default(){
                  return {};  
            }        
        },
        types:{
            type:Array,
            default(){
                return [];
            }
        }
    },
    data(){
        return{
            tipNames
        };
    },
    methods:{
        showMore(){
            this.$emit('showmore',this.name)
        }
    }
}
</script>

<style>
    .content-total { display: flex; justify-content: flex-start; flex-wrap: wrap}
    .content-total li { width: 25%; margin: 20px 0; text-align: center}
    .count-item .n { font-size: 18px; margin: 5px 0;font-weight: bold}
    .count-item.confirm .n { color: #a62a2c;}
    .count-item.nowConfirm .n { color: #e73b3d;}
    .count-item.heal .n { color: #03a612;}
    .count-item.dead .n { color: #a6a3a5;}
    .count-item.n5 .n { color: #2e5ebc;}
    .count-item .lab {font-size: 14px; line-height: 1.8em;}
    .compare {font-size: 12px; }
</style>